<!-- 订单详情 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="order-detail">
      <!-- 订单头部信息 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单详情</span>
        </div>
        <div>
          <el-form>
            <el-row :gutter="20">

              <el-col :span="8">

                <el-form-item label="订单编号">
                  {{ orderDetails.orderId }}
                </el-form-item>

              </el-col>
              <el-col :span="8">
                <el-form-item label="下单时间">
                  {{ orderDetails.orderTime }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单状态">
                  {{ orderDetails.status }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="收货人">
                  {{ orderDetails.receiverName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收货地址">
                  {{ orderDetails.receiverAddress }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="支付方式">
                  {{ orderDetails.paymentMethod }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="订单总金额">
                  {{ orderDetails.totalAmount }} 元
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
        </div>
      </el-card>
      <!--   订单明细列表   -->
      <el-card class="box-card" v-if="orderDetails.items">
        <div slot="header" class="clearfix">
          <span>订单明细</span>
        </div>
        <el-table :data="orderDetails.items" style="width: 100%">
          <el-table-column prop="productName" label="商品名称"></el-table-column>
          <el-table-column prop="quantity" label="数量"></el-table-column>
          <el-table-column prop="unitPrice" label="单价 (元)"></el-table-column>
          <el-table-column prop="subTotal" label="小计 (元)"></el-table-column>
        </el-table>
      </el-card>

      <!-- 操作按钮 -->
      <el-row class="text-center" >
        <el-button v-if="orderDetails.status === '待支付'" type="primary" @click="handlePay">支付</el-button>
        <el-button v-if="orderDetails.status === '已支付' && !orderDetails.isDelivered" type="primary" disabled>待发货</el-button>
        <el-button v-if="orderDetails.status === '已发货'" type="primary" @click="handleViewLogistics">查看物流</el-button>
        <el-button v-if="orderDetails.status === '已收货'" type="primary" @click="handleConfirmReceipt">确认收货</el-button>
        <el-button v-if="orderDetails.status === '已完成'" type="primary" @click="handleEvaluate">评价</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
// import { orderDetailsData, orderSave, orderDelete } from '../../api/basisMG'
export default {
  // name: 'MyComponent', // 组件的名称 
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      orderVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      orderDetails: {},
      orderDetailsInline: {
        orderId: '',
        productName: '',
        token: localStorage.getItem('logintoken')
      },

    }
  },

  created() {
    this.getorderDetailsdata(this.orderDetailsInline)
  },
  methods: {
    // 获取数据列表
    getorderDetailsdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 18,
        data: {
          orderId: '1234567890',
          orderTime: '2024-04-01 T12:00:00Z',
          receiverName: '张三',
          receiverAddress: '北京市北京市丰台区xx街道xx号',
          receiverPhone: '13800000000',
          status: '已支付',
          paymentMethod: '在线支付',
          totalAmount: 224.89,
          items: [
            {
              productId: 1,
              productName: '等离子杀菌苹果',
              quantity: 5,
              unitPrice: 10.99,
              subTotal: 54.95
            },
            {
              productId: 2,
              productName: '等离子杀菌生菜',
              quantity: 2,
              unitPrice: 9.99,
              subTotal: 19.98
            },
            {
              productId: 3,
              productName: '等离子杀菌土豆',
              quantity: 2,
              unitPrice: 9.99,
              subTotal: 19.98
            },
            {
              productId: 4,
              productName: '等离子杀菌火龙果',
              quantity: 2,
              unitPrice: 19.99,
              subTotal: 39.98
            },
            {
              productId: 5,
              productName: '等离子杀菌农家自产黄瓜',
              quantity: 20,
              unitPrice:4.5,
              subTotal: 90.00
            },
          ]
        }
      }
      this.loading = false
      this.orderDetails = res.data
      console.log(this.orderDetails, "8978");
      // 测试环境  模拟数据结束  

      /***
       *  正式环境环境 调用接口
       */
      //  orderDetailsData(parameter)
      //     .then(res => {
      //       this.loading = false
      //       if (res.success == false) {
      //         this.$message({
      //           type: 'info',
      //           message: res.msg
      //         })
      //       } else {
      //         this.orderDetails = res.data
      //       
      //       }
      //     })
      //     .catch(err => {
      //       this.loading = false
      //       this.$message.error('加载失败，请稍后再试！')
      //     })

    },
    //去支付
    handlePay() {
      //触发去支付方法走支付逻辑
        this.$bus.$emit('pay',this.orderDetails)
    },
    //查看物流
    handleViewLogistics() {
      //触发查看物流方法去查看物流详细信息
      this.$bus.$emit('viewLogistics',this.orderDetails)

    },

    //确认收货
    handleConfirmReceipt() {
       //触发确认收货方法去确认收货
      this.$bus.$emit('viewLogistics',this.orderDetails)

    },
    //评价
    handleEvaluate() {
      //触发评价方法去做评价
      this.$bus.$emit('evaluate',this.orderDetails) 

    }
  }


}
</script>

<style scoped>
.order-detail{
  margin-top: 30px;

}
.text-center{
  margin-top: 20px;
}
.order-detail-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.order-summary {
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.order-summary dl {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.order-summary dt,
.order-summary dd {
  flex: 1 0 50%;
  margin: 0;
  padding: 5px 0;
}

.order-summary dt {
  font-weight: bold;
}

.order-items {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.order-items th,
.order-items td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.order-items th {
  background-color: #f2f2f2;
}

.order-actions {
  margin-top: 20px;
}

.order-actions button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition-duration: 0.4s;
}

.order-actions button:hover {
  background-color: #45a049;
  /* Dark Green */
  color: white;
}
</style>

 
 